<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<title></title>
<style>
	*{
		margin: 0;
		padding: 0;
		font-size: 12px;
	}
	ul{
		list-style: none;
	}
	a{
		text-decoration: none;
	}
	.wrapper{
		width: 298px;
		height: 248px;
		margin:100px auto 0;
		border: 1px solid burlywood;
		overflow: hidden;
	}
	#left,#center,#right{
		float: left;
	}
	#left li,#right li{
		background: url(./img/lili.jpg)repeat-x;
	}
	#left li a,#right li a{
		display: block;
		width: 48px;
		height: 27px;
		border-bottom: 1px solid burlywood;
		line-height: 27px;
		text-align: center;
		color:black;
	}
	#left li a:hover,#right li a:hover{
		color: #fff;
		background-image: url(./img/abg.gif);
	}
	#center{
		border-left: 1px solid turquoise;
		border-right: 1px solid turquoise;
	}
	img{
		width: 200px;
		height: 250px;
	}
</style>
</head>
<body>
	<div class="wrapper">
		<ul id='left'>
			<!-- <li><a href="#">登山鞋</a></li> -->
		</ul>
		<ul id='center'>
			<a href="#"><img src="img/登山鞋.jpg"></a>
		</ul>
		<ul id='right'>
		</ul>
	</div>
	<script>
		//入口函数
		$(function(){
			let	data='登山鞋,男毛衣,男棉服,男士马靴,男士包包,皮衣,皮带,雪地靴,男士围巾,女肩包,女裤,女士马靴,牛仔裤,毛衣,军大衣,羽绒服,冬裙,女棉服'
			data=data.split(',')
			// console.log(data);
			function appendGood(name,index){
				let ul=index<9 ? $('#left'):$('#right');
				ul.append(`<li><a href="#">${name}</a></li>`)
			}
			data.forEach((o,i)=>appendGood(o,i));
			// $(selector).attr('src')
			$('li').mouseover(function(){
				let name=$(this).text();
				$('img').attr('src',`img/${name}.jpg`)
			})
			
			
			
			
			
			// $(selector)append(ul);//添加子元素
			
			// let data=$("#left").text()+$('#right').text();
			// // /\s/g 换行表达式
			// data=data.split('\n').join(',').replace(/\s/g,'');
			// console.log(data)
			

			// console.log($("left>li").text())
			// console.log($("left>li").html())
			// console.log($("#left").text())
			
	})
	</script>
</body>
</html>
